<%--
  Created by IntelliJ IDEA.
  User: 29754
  Date: 2021/3/22
  Time: 21:45
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath %>"/>
    <%--引入EasyUI的资源--%>
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <script type="text/javascript">
<%--        给增加菜单按钮增加相应的事件--%>
        $(function () {
            $("#addMune").click(function () {
                //打开增加菜单对话框
                $("#addMenuDialog").dialog('open');
                var selected = $("#menuTree").tree('getSelected');
                console.log(selected);
                console.log(selected.id);
                console.log(selected.attributes.isparent);
                //判断当前是否选择了节点，或者选择的节点是否为父节点，
                // 如果未选择或选择的是父节点，那么直接增加为父节点
                if (selected==null || selected.status=="close") {
                        $("#pid").val(0);
                        $("#isparent").val("1");
                }else{
                        $("#pid").val(selected.id);
                        $("#isparent").val(selected.attributes.isparent);
                }
            })
        })
        //给完成增加按钮添加相关实现
        $(function () {
            $("#finishAdd").click(function () {
                $("#addMenuForm").form("submit",{
                    url:"menu/addMenu",
                    success:function (data) {
                        eval("var d = "+data);
                        if (d.success){
                            //重新加载异步树
                            $.messager.alert("提示","菜单增加成功");
                            $("#menuTree").tree("reload");
                        }else{
                            $.messager.alert("提示","菜单增加失败");
                        }
                    }
                })
            })
        })
        //点击编辑菜单按钮时，该如何？提示用户请选择要编辑的菜单信息，
        // 选择好后，进入菜单编辑对话框，回显当前菜单的信息，如果是父级菜单，将url修改框设置为禁用状态
        $(function () {
            $("#editMune").click(function () {
                //打开编辑对话框
                var selected = $("#menuTree").tree('getSelected');
                if (selected==null){
                    //提示用户选择菜单
                    $.messager.alert('提示','请选择要编辑的菜单');
                }else {
                    $("#editMenuDialog").dialog('open');
                    //保存当前菜单节点的id
                    $("#mid").val(selected.id);
                    //回显菜单名称，菜单URL，菜单描述
                    $("#editMname").val(selected.attributes.mdesc);
                    $("#editUrl").val(selected.attributes.url);
                    if (selected.attributes.isparent==1){
                        //当前节点为父节点
                        $("#editUrl").attr("readonly","readonly");
                    }
                }

            })
        })
        //给修改菜单按钮增加事件
        $(function () {
            $("#finishEdit").click(function () {
                $("#editMenuForm").form("submit",{
                    url:"menu/editMenu",
                    success:function (data) {
                        eval("var d = "+data);
                        if (d.success){
                            //修改成功,重新加载异步树
                            $("#menuTree").tree("reload");
                        }
                    }
                })
            })
        })
        //给删除按钮增加相应方法
        $(function () {
            $("#deleteMune").click(function () {
                var selected = $("#menuTree").tree('getSelected');
                if (selected==null){
                    //提示用户选择菜单
                    $.messager.alert('提示','请选择要删除的菜单');
                }else
                {
                    //存储当前选择的菜单树的id
                    $("#deleteMid").val(selected.id);
                    //打开窗口并使其居中
                    $.messager.confirm('确认', '你确定要删除吗？', function (r) {
                        if (r) {
                            //如果点击🆗，则将数据传入后台，进行删除功能
                            $("#deleteMenuForm").form("submit",{
                                url:"menu/deleteMenuById",
                                success:function (data) {
                                    eval("var d = "+data);
                                    if (d.success){
                                        //删除成功则显示，删除成功消息框，并且刷新异步树
                                        $("#menuTree").tree("reload");
                                        $.messager.alert('提示',d.message);
                                    }else {
                                        $.messager.alert('提示',d.message);                                    }
                                }
                            })
                        }
                    });
                }

            })
        })
    //给刷新菜单按钮增加相应方法
        $(function () {
            $("#flushMune").click(function () {
                $("#menuTree").tree("reload");
            })
        })
    </script>
</head>
<body>
<%--总体面板--%>
<div id="p" class="easyui-panel"
     style="width:98%;height:95%;padding:2px;background:#fafafa;">
<%--将面板进行布局分块--%>
    <div id="cc" class="easyui-layout" style="width:98%;height:98%;">
        <div data-options="region:'west',title:'操作',split:true,collapsible:false" style="width:20%;">
<%--            四个按钮，分别对应不同的菜单操作--%>
            <div>
                <a id="addMune" href="javascript:void (0)" class="easyui-linkbutton" style="margin-top: 20px;margin-left: 90px;">增加菜单</a>
            </div>
            <div>
                <a id="editMune" href="javascript:void (0)" class="easyui-linkbutton" style="margin-top: 10px;margin-left: 90px;">编辑菜单</a>
            </div>

            <div>
                <a id="deleteMune" href="javascript:void (0)" class="easyui-linkbutton" style="margin-top: 10px;margin-left: 90px;">删除菜单</a>
            </div>

            <div>
                <a id="flushMune" href="javascript:void (0)" class="easyui-linkbutton" style="margin-top: 10px;margin-left: 90px;">刷新菜单</a>
            </div>

        </div>
        <div data-options="region:'center',title:'当前系统菜单'" style="padding:5px;background:#eee;width:78% ">
            <%--声明异步树组件--%>
            <ul id="menuTree" class="easyui-tree" data-options="url:'menu/menuInfo'"></ul>
        </div>
    </div>
</div>

<div id="addMenuDialog" class="easyui-dialog" closed="true" title="新增菜单" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
<%--    在新增菜单对话框中添加form表单--%>
    <form id="addMenuForm" method="post">
<%--        设置一些隐藏属性，如菜单的父菜单id,菜单是否为父节点，当前菜单打开的状态，默认为0，不打开--%>
        <input id="pid" class="easyui-textbox" style="width:200px" type="hidden" name="pid" />
        <input id="isparent" class="easyui-textbox" style="width:200px" type="hidden" name="isparent"/>
        <input id="status" class="easyui-textbox" style="width:200px" type="hidden" name="status" value="0">
    <div style="margin-top: 20px;margin-left: 40px">
            菜单名称：<input id="mname" class="easyui-textbox" style="width:200px" type="text" name="mname">
        </div>
        <div  style="margin-top: 10px;margin-left: 40px">
            菜单URL：<input id="url" class="easyui-textbox"  style="width:200px" type="text" name="url">
        </div>
        <div  style="margin-top: 10px;margin-left: 40px">
            菜单描述：<input id="mdesc" class="easyui-textbox" style="width:200px" name="mdesc" type="text">
        </div>
        <a id="finishAdd" href="javascript:void (0)" class="easyui-linkbutton"
           data-options="iconCls:'icon-ok'" style="margin-top: 10px;margin-left: 40px">
            完成增加
        </a>
    </form>

</div>
<%--编辑菜单对话框--%>
<div id="editMenuDialog" class="easyui-dialog" closed="true" title="新增菜单" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
    <%--    在新增菜单对话框中添加form表单--%>
    <form id="editMenuForm" method="post">
        <%--  保存当前菜单的mid--%>
        <input id="mid" class="easyui-textbox" style="width:200px" type="hidden" name="mid">
        <div style="margin-top: 20px;margin-left: 40px">
            菜单名称：<input id="editMname" class="easyui-textbox" style="width:200px" type="text" name="mname">
        </div>
        <div  style="margin-top: 10px;margin-left: 40px">
            菜单URL：<input id="editUrl" class="easyui-textbox"  style="width:200px" type="text" name="url">
        </div>
        <div  style="margin-top: 10px;margin-left: 40px">
            菜单描述：<input id="editMdesc" class="easyui-textbox" style="width:200px" name="mdesc" type="text">
        </div>
        <a id="finishEdit" href="javascript:void (0)" class="easyui-linkbutton"
           data-options="iconCls:'icon-ok'" style="margin-top: 10px;margin-left: 40px">
            完成更新
        </a>
    </form>
</div>
<%--增加删除菜单窗口--%>
<form id="deleteMenuForm" method="post">
    <input id="deleteMid" name="mid"/>
</form>
</body>
</html>
